<template>
  <div class="app-container mod-hot-search">
    <!-- 搜索相关区域 -->
    <div class="filter-container">
      <el-form :inline="true" :model="pageQuery" class="demo-form-inline">
        <el-form-item label="手机号码">
          <el-input
            v-model="pageQuery.phone"
            size="mini"
            placeholder="请输入手机号码"
          />
        </el-form-item>

        <el-form-item label="创建时间">
          <el-date-picker
            v-model="times"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="吧台区域">
          <el-cascader
            :size="'medium'"
            :options="options"
            v-model="provinces1"
            @change="dynamicHandleChange1"
            :placeholder="'请选择城市'"
            :parameters="'code'"
          ></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="apiPage()"
            size="mini"
            icon="el-icon-search"
            >查询</el-button
          >
          <el-button
            size="mini"
            icon="el-icon-delete"
            @click="clearSearchInfo()"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="filter-container">
      <el-form :inline="true" :model="pageQuery" class="demo-form-inline">
        <el-form-item>
          <el-button
            type="primary"
            size="medium"
            icon="el-icon-plus"
            @click="getPages('add')"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 列表相关区域 -->
    <el-table
      v-loading="pageLoading"
      :data="pageVO.list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="人员名称" prop="riderName" align="center">
        <template slot-scope="{ row }">
          <p @click="ontGoy(row)" style="color: rgb(0, 132, 255)">
            <a>{{ row.riderName }}</a>
          </p>
        </template>
      </el-table-column>
      <el-table-column label="联系方式" prop="phone" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.phone }}</span>
        </template>
      </el-table-column>
      <!-- 所属商品 -->
      <el-table-column
        label="骑手类型"
        prop="leixing"
        width="250"
        align="center"
      >
        <template slot-scope="{ row }">
          <p :class="row.riderType == '1' ? 'ee1' : 'ee2'">
            {{ row.riderType == 1 ? "全职" : "兼职" }}
          </p>
        </template>
      </el-table-column>
      <!-- 订单数量 -->
      <el-table-column label="负责区域" prop="seq" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.area }}</span>
        </template>
      </el-table-column>
      <el-table-column label="吧台数量" prop="seq" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.batNum }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" prop="createTime" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('table.actions')"
        align="center"
        width="200"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="getPages(row)">
            编辑
          </el-button>
          <el-button type="primary" size="mini" @click="goDetail(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条 -->
    <pagination
      v-show="pageVO.total > 0"
      :total="pageVO.total"
      :page.sync="pageQuery.pageNum"
      :limit.sync="pageQuery.pageSize"
      @pagination="apiPage()"
    />
    <!-- 新增编辑 -->
    <el-dialog
      :title="oterNames"
      width="1050px"
      :visible.sync="dialogFormVisible"
    >
      <el-form style="width: 100%" :model="form" ref="form" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="人员名称:" label-width="90px" prop="riderName">
              <el-input
                placeholder="请输入人员名称"
                v-model="form.riderName"
                style="width: 65%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="联系方式:" label-width="90px" prop="phone">
              <el-input
                placeholder="请输入联系方式"
                v-model="form.phone"
                style="width: 65%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="负责区域:" label-width="90px" prop="area">
              <div>
                <el-cascader
                  :size="'medium'"
                  :options="options"
                  v-model="provinces"
                  @change="dynamicHandleChange"
                  :placeholder="'请选择城市'"
                  :parameters="'code'"
                ></el-cascader>
              </div>
            </el-form-item>
          </el-col>
          <el-col style="margin-left: 15px" :span="10">
            <el-form-item label="人员类型:">
              <el-radio-group v-model="form.riderType">
                <el-radio :label="2">兼职</el-radio>
                <el-radio :label="1">全职</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="身 份 证:" label-width="90px" prop="cardNum">
              <el-input
                placeholder="请输入身份证号"
                v-model="form.cardNum"
                style="width: 65%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item
              label="健 康 证:"
              label-width="90px"
              prop="healthyNum"
            >
              <el-input
                placeholder="请输入健康证号"
                v-model="form.healthyNum"
                style="width: 65%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="10" style="margin: 0px 10px">
            <el-upload
              class="avatar-uploader"
              :action="onUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :headers="uploadHeaders"
            >
              <img v-if="form.frontImg" :src="resourcesUrl+form.frontImg" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon">身份证正面</i>
            </el-upload>
          </el-col>
          <el-col :span="10" style="margin: 0px -10px">
            <el-upload
              class="avatar-uploader"
              :action="onUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess1"
              :before-upload="beforeAvatarUpload1"
              :headers="uploadHeaders"
            >
           
              <img
                v-if="form.healthyImg"
                :src="resourcesUrl+form.healthyImg"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon">健康证 {{ resourcesUrl }}</i>
            </el-upload>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10" style="margin: 10px">
            <el-upload
              class="avatar-uploader"
              :action="onUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess2"
              :before-upload="beforeAvatarUpload2"
              :headers="uploadHeaders"
            >
              <img v-if="form.behindImg" :src="resourcesUrl+form.behindImg" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon">身份证反面</i>
            </el-upload>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 10px">
          <el-col :span="10">
            <el-form-item label="负责吧台:" label-width="90px" prop="phon">
              <el-button style="width: 205px" type="primary" plain @click="addBut"
                >新增吧台</el-button
              >
            </el-form-item></el-col
          >
        </el-row>
      </el-form>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="吧台编号" width="300">
        </el-table-column>
        <el-table-column prop="name" label="投放区域" width="300">
        </el-table-column>
        <el-table-column
          :label="$t('table.actions')"
          align="center"
          width="200"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row }">
            <el-button type="primary" size="mini" @click="goDetails(row)">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dahdhie">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
    <onindes ref="showmost" />
  </div>
</template>
  
  <script>
import permission from "@/directive/permission/index.js";
import Pagination from "@/components/Pagination";
import onindes from "./components/onindes.vue";
import * as api from "@/api/platform/rider.js";
import { regionData } from "element-china-area-data"; //引入

export default {
  name: "",
  components: { Pagination, onindes },
  directives: { permission },
  data() {
    return {
      times: [],
      resourcesUrl: process.env.VUE_APP_RESOURCES_IMG,

      uploadHeaders: {
        Authorization:this.getCookie('gscloud-platform-Token'),
      },
      onUrl: "",
      dialogFormVisible: false,
      options: regionData, //选择格式
      provinces: [], //省市区绑定数组
      provinces1: [], //省市区绑定数组
      tableData: [
        {
          date: "15414894870",
          name: "天鸿广场",
        },
        {
          date: "12321542341",
          name: "美乐城",
        },
      ],
      valueModel: "",
      value: "",
      imageUrl: "",
      pageLoading: false,
      oterNames: null,
      form: {
        riderName: null, //姓名
        phone: null, //联系方式
        region: null, //地区
        healthyNum: null, //健康证号
        riderType: 2, //人员类型
        cardNum: null, //身份证号
        area: null, //地区
        behindImg: "", //背面
        frontImg: "", //正面
        healthyImg: "", //健康码
      },
      rules: {
        area: [
          { required: true, message: "请负责选择区域", trigger: "change" },
        ],
        riderName: [
          { required: true, message: "请输入人员名称", trigger: "change" },
        ],
        phone: [
          { required: true, message: "请输入联系方式", trigger: "change" },
        ],
        cardNum: [
          { required: true, message: "请输入身份证号", trigger: "change" },
        ],
        healthyNum: [
          { required: true, message: "请输入健康证号", trigger: "change" },
        ],
      },
      token: this.getCookie('gscloud-platform-Token'),
      // 查询的参数
      pageQuery: {
        pageSize: 5,
        pageNum: 1,
        phone: null,
        area: null,
      },

      // 返回参数
      pageVO: {
        list: [], // 返回的列表
        total: 0, // 一共多少条数据
        pages: 0, // 一共多少页
      },
    };
  },
  watch: {
    dialogFormVisible(newVal, oldVal) {
      if (!newVal && oldVal) {
        this.clearForm();
      }
    },
  },
  mounted() {
    this.onUrl = process.env.VUE_APP_BASE_API+'/gscloud_biz/oss/upload_minio';
    this.apiPage();

  },
  methods: {
    addBut(){
      console.log(12113);
    },
  getCookie(name) {
  const cookieArr = document.cookie.split(';');
  for (let i = 0; i < cookieArr.length; i++) {
    let cookiePair = cookieArr[i].trim().split('=');
    if (cookiePair[0] === name) {
      return decodeURIComponent(cookiePair[1]);
    }
  }
  return null;
},
    dahdhie() {
      this.dialogFormVisible = false;
    },
    dynamicHandleChange1(e) {
      this.pageQuery.area = this.ideograph(e).join("");
    },
    dynamicHandleChange(e) {
      this.form.area = this.ideograph(e).join("");
    },
    customChangeHandler(e) {
      if (this.dialogFormVisible) {
        this.form.area = e;
      } else {
        this.pageQuery.area = e;
      }
    },
    //转换为中文
    ideograph(code) {
      const areas = [];
      if (Array.isArray(code) && code.length) {
        let region = this.options;
        for (let i = 0; i < code.length; i++) {
          const item = code[i];
          const found = region.find((regionItem) => regionItem.value === item);
          if (found) {
            areas.push(found.label); // 直接将中文推入数组中
            region = found.children || [];
            if (i === code.length - 1) {
              // 最后一个区域，可以打印或进行其他处理
            }
          } else {
            break;
          }
        }
      }
      return areas;
    },
    //转换为值
    ideographs(code) {
      const areas = [];
      if (Array.isArray(code) && code.length) {
        let region = this.options;
        for (let i = 0; i < code.length; i++) {
          const item = code[i];
          const found = region.find((regionItem) => regionItem.label === item);
          if (found) {
            areas.push(found.value); // 直接将中文推入数组中
            region = found.children || [];
            if (i === code.length - 1) {
              // 最后一个区域，可以打印或进行其他处理
            }
          } else {
            break;
          }
        }
      }
      return areas;
    },

    //正面
    handleAvatarSuccess(res, file) {
      this.form.frontImg =
        res.data.actionUrl + res.data.dir + res.data.fileName;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //反面
    handleAvatarSuccess1(res, file) {
      this.form.healthyImg =
        res.data.actionUrl + res.data.dir + res.data.fileName;
    },
    beforeAvatarUpload1(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //健康码
    handleAvatarSuccess2(res, file) {
      this.form.behindImg =
        res.data.actionUrl + res.data.dir + res.data.fileName;
    },
    beforeAvatarUpload2(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    apiPage() {
      api.barRiderList(this.pageQuery).then((res) => {
        this.pageVO.list = res.list;
        this.pageVO.total = res.total;
        this.pageVO.pages = res.pages;
      });
    },
    ontGoy(val) {
      this.$refs.showmost.showModal(val);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.form.behindImg == "") {
            this.$message({
              message: "请上传身份证背面",
              type: "warning",
            });
            return;
          }
          if (this.form.frontImg == "") {
            this.$message({
              message: "请上传身份证正面",
              type: "warning",
            });
            return;
          }
          if (this.form.healthyImg == "") {
            this.$message({
              message: "请上传健康码",
              type: "warning",
            });
            return;
          }
          if (this.oterNames == "编辑") {
            api.putRider(this.form).then(res=>{
              this.dialogFormVisible = false;
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.apiPage();
            })
            console.log(this.form);
          } else {
            this.form.status=0
            api.AddbarRider(this.form).then((res) => {
              this.dialogFormVisible = false;
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.apiPage();
            });
          }
        } else {
          return false;
        }
      });
    },
    clearForm() {
      console.log(this.$refs.form);
      this.$refs.form.resetFields();
      this.form.riderName = null; //姓名
      this.provinces = [];
      this.form.phone = null; //联系方式
      this.form.region = null; //地区
      this.form.healthyNum = null; //健康证号
      this.form.riderType = 2; //人员类型
      this.form.cardNum = null; //身份证号
      this.form.behindImg = ""; //背面
      this.form.frontImg = ""; //正面
      this.form.healthyImg = ""; //健康码
      this.form.area = null; //地区
    },
    getPages(val) {
      this.dialogFormVisible = true;

      if (val == "add") {
        this.oterNames = "新增";
      } else {
        if (val.area != null) {
          let aters = this.handleClicks(val.area);
          this.provinces = this.ideographs(aters);
        }
        this.form.riderId=val.riderId
        this.oterNames = "编辑";
        this.form.riderName = val.riderName; //姓名
        this.form.phone = val.phone; //联系方式
        this.form.region = val.region; //地区
        this.form.healthyNum = val.healthyNum; //健康证号
        this.form.riderType = val.riderType; //人员类型
        this.form.cardNum = val.cardNum; //身份证号
        this.form.area = val.area; //地区
        this.form.behindImg = val.behindImg; //背面
        this.form.frontImg = val.frontImg; //正面
        this.form.healthyImg = val.healthyImg; //健康码
        console.log(val);
      }
    },
    handleClicks(address) {
      const regex =
        /^(.+?省|.+?自治区|.+?市)(.+?市|.+?地区|.+?盟|.+?自治州|.+?自治县|.+?县|.+?区)(.+?区|.+?县|.+?自治县|.+?旗|.+?自治旗|.+?特区|.+?林区)$/;
      const match = address.match(regex);
      console.log(match);
      return [match[1], match[2], match[3]];
    },

    goDetail(row) {
      api.delbarRider({ barRiderId: row.riderId }).then((res) => {
        console.log(res);
      });
    },
    goDetails(row){
    console.log(row);
    },
    clearSearchInfo() {
      // 若请求参数某项没值，则不传此参数
      this.pageQuery.pageNum = 1;
      this.provinces1 = [];
      this.pageQuery.pageSize = 5;
      this.pageQuery.phone = null;
      this.pageQuery.area = null;
      this.apiPage();
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.mod-hot-search {
  .el-form--inline {
    .el-form-item {
      margin-right: 20px;
    }
  }
}
.ee1 {
  background-color: rgba(31, 99, 255, 0.2);
  color: rgb(31, 99, 255);
  text-align: center;
  padding: 5px 10px;
  border-radius: 10px;
  width: 40%;
  margin-left: 30%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  margin: 10px;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 18px;
  color: #8c939d;
  border: 1px dashed #ccc;
  margin-left: 10px;
  width: 280px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  margin-left: 10px;
  width: 280px;
  height: 100px;
  display: block;
}
.ee2 {
  background-color: rgba(253, 209, 67, 0.3);
  color: rgb(244, 187, 0);
  text-align: center;
  padding: 5px 10px;
  border-radius: 10px;
  width: 40%;
  margin-left: 30%;
}
</style>
  